<template>
  <div>
    <!-- 蓝色头部 -->
    <div class="user-container">
      <!-- 头像名称部分 -->
      <div class="user-header" @click="headerClick">
        <van-image width="2.13333rem" height="2.13333rem" round :src="$store.state.userPhoto" />
        <div class="user-name">
          <div class="name">{{$store.state.userName}}</div>
          <van-tag plain type="primary" size="medium">申请认证</van-tag>
        </div>
      </div>
      <!-- 三个按钮部分 -->
      <van-row gutter="50">
        <van-col span="7">
          <div>{{UserData.art_count}}</div>
          <div>动态</div>
        </van-col>
        <van-col span="7">
          <div>{{UserData.follow_count}}</div>
          <div>关注</div>
        </van-col>
        <van-col span="7">
          <div>{{UserData.fans_count}}</div>
          <div>粉丝</div>

        </van-col>
      </van-row>
    </div>
    <!-- 白色下面部分 -->
    <div class="user-editer">
      <van-cell title="编辑资料" icon="edit" is-link to="/user_editor" />
      <van-cell title="小思同学" icon="chat-o" is-link to="/chart" />
      <van-cell title="退出登录" icon="warning-o" is-link @click="quitFn" />
    </div>
  </div>
</template>

<script>
import { getUserDataAPI } from '@/api'
import { Dialog } from 'vant'
import { removeToken } from '@/utils/token.js'
import { mapMutations, mapActions } from 'vuex'
import { removeStorage } from '@/utils/storage.js'
export default {
  name: 'User',
  data() {
    return {
      UserData: {} // 个人基本信息
    }
  },
  created() {
    this.getUserDataFn()
    // 进入个人信息页面时，把组件改为缓存
    this.deleteExculdeCacheView('User')
  },
  methods: {
    ...mapMutations(['SET_USERPHOTO', 'SET_USERNAME']),
    ...mapActions(['deleteExculdeCacheView', 'addExculdeCacheView']),
    // 获取个人基本信息
    async getUserDataFn() {
      const { data: res } = await getUserDataAPI()
      this.UserData = res.data
      // 第一种使用vuex传值的方法
      // this.$store.commit('SET_USERPHOTO', this.UserData.photo)
      // 第二种方法
      this.SET_USERPHOTO(this.UserData.photo)
      this.SET_USERNAME(this.UserData.name)
    },
    // 退出登录
    quitFn() {
      Dialog.confirm({
        title: '是否退出登录',
        message: '这就走了？不爱我了吗？'
      })
        .then(() => {
          // 点击确认选项
          // this.$destroy()
          removeToken()
          removeStorage('refresh_token')
          // 退出登录时，把组件改为非缓存状态
          this.addExculdeCacheView('User')
          this.$router.replace('/layout')
        })
        .catch(() => {
          // 点击取消
        })
    },
    // 头像部分被点击，进入详细个人信息页面
    headerClick() {
      this.$router.push('/user_editor')
    }
  }
}
</script>

<style lang="less" scoped>
.user-container {
  background-color: #007bff;
  padding-left: 20px;
  padding-bottom: 30px;
  .user-header {
    display: flex;
    align-items: center; /*垂直居中*/
    padding-top: 30px;
    .user-name {
      padding-left: 10px;
      .name {
        font-size: 16px;
        font-weight: 700;
        color: #fff;
      }
    }
  }
  .van-row {
    padding-top: 40px;
    font-size: 16px;
    color: #fff;
    .van-col {
      display: flex;
      flex-direction: column;
      align-items: center; /*垂直居中*/
    }
  }
}
.user-editer {
  padding-top: 5px;
}
</style>
